<template>
  <h3>我是App组件</h3>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  readonly,
  isRef,
  isReactive,
  isReadonly,
  isProxy,
} from "vue";
export default {
  name: "App",
  setup() {
    let car = reactive({ name: "奔驰", price: "40W" });
    let sum = ref(0);
    let car2 = readonly(car); // readonly 处理了响应式数据变为只读，但它的数据类型依旧为Proxy（代理对象）

    /* 
		isRef: 检查一个值是否为一个 ref 对象
		isReactive: 检查一个对象是否是由 `reactive` 创建的响应式代理
		isReadonly: 检查一个对象是否是由 `readonly` 创建的只读代理
		isProxy: 检查一个对象是否是由 `reactive` 或者 `readonly` 方法创建的代理
	*/
    console.log(isRef(sum)); // true
    console.log(isReactive(car)); // true
    console.log(isReadonly(car2)); // true
    console.log(isProxy(car)); // true
    console.log(isProxy(sum)); // false 利用的是Object.defineProperty()不是Proxy()

    return { ...toRefs(car) };
  },
};
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>